<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo by hans</title>
    <style>
        ul { list-style: none; }
        li { position: relative; float: left; width: 250px; height: 300px; }
    </style>
    <link rel="stylesheet" href="./colorpicker.css">
    <script src="./colorpicker.js"></script>
</head>
<body>
    <div class="box">
        <ul>
            <li id="color"></li>
            <li id="color2"></li>
            <li id="color3"></li>
        </ul>
    </div>
    <!-- <div class="panel">
        <div class="hue">
            <div class="saturation mask">
                <div class="white mask"></div>
                <div class="black mask"></div>
                <div class="pointer">
                    <div></div>
                </div>
            </div>
        </div>
        <div class="slider">
            <div class="bar">
                <div class="mark">
                    <div></div>
                </div>
            </div>
        </div>
    </div> -->

</body>
<script>
    let $ = sel => document.querySelector(sel);
    let $$ = sel => document.querySelectorAll(sel);
    let log = console.log.bind(console);

    new ColorPicker($('#color')).init();
    new ColorPicker($('#color2')).init();
    new ColorPicker($('#color3')).init();
</script>
</html>